<template>
	<view class="warp">
		<view class="tab">
			<view class="info" @click="navigator(sortData?.second?.userInfo?._id)">
				<image :src="sortData?.second?.userInfo?.avatar_file?.url  || '../../../static/logo.png'" mode="aspectFill" class="info-image"></image>
				<view class="info-sign">{{sortData?.second?.giftprice/10 || 0}}福币</view>
				<view class="">{{sortData?.second?.userInfo?.nickname || "暂无"}}</view>
			</view>
			<view class="sort1">2</view>
		</view>
		<view class="tab">
			<view class="info"  @click="navigator(sortData?.first?.userInfo?._id)">
				<image :src="sortData?.first?.userInfo?.avatar_file?.url  || '../../../static/logo.png'" mode="aspectFill" class="info-image"></image>
				<view class="info-sign">{{sortData?.first?.giftprice/10 || 0}}福币</view>
				<view class="">{{sortData?.first?.userInfo?.nickname || "暂无"}}</view>
			</view>
			<view class="sort2">1</view>
		</view>
		<view class="tab">
			<view class="info"  @click="navigator(sortData?.third?.userInfo?._id)">
				<image :src="sortData?.third?.userInfo?.avatar_file?.url  || '../../../static/logo.png'" mode="aspectFill" class="info-image"></image>
				<view class="info-sign">{{sortData?.third?.giftprice/10 || 0}}福币</view>
				<view class="">{{sortData?.third?.userInfo?.nickname || "暂无"}}</view>
			</view>
			<view class="sort3">3</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"wolf-sort-header",
		props:{
			sortData:{
				type:Object,
				default:()=>({})
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			navigator(id){
				console.log("id==>",id);
				if(!id) return
				uni.navigateTo({
					url:`/pages/list/userInfo?id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	view{
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.warp{
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
	}
	.tab{
		width: 200rpx;
		padding: 10rpx;
	}
	.sort1,.sort2,.sort3{
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		justify-content: center;
		align-items: center;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.sort1{
		height: 100rpx;
		background-color: #17c303;
	}
	.sort2{
		height: 160rpx;
		background-color: #f00;
	}
	.sort3{
		height: 50rpx;
		background-color: #464baa;
	}
	
	.info{
		align-items: center;
		font-size: 12px;
		font-weight: 600;
		&-image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		&-sign{
			color: #f00;
			font-size: 14px;
		}
		
	}
</style>
